<template>
    <div>
        <div class="demo">
            <wxc-minibar title="通讯录"
                         background-color="#009ff0"
                         right-text="更多+"
                         text-color="#FFFFFF"
                         leftButton=""
                         @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                         @wxcMinibarRightButtonClicked="toggle2()">
            </wxc-minibar>
        </div>
        <div>
            <div class="tongzhi" @click="tongzhi(event)">
                <div class="tongzhi_img">
                    <wxc-icon name="play"></wxc-icon>
                </div>
                <div class="ql">
                    <text style="margin-left:-420px" >消息通知</text>
                </div>
            </div>
            <div class="tongzhi" @click="qunliao(event) ">
                <div class="tongzhi_img">
                    <wxc-icon name="play"></wxc-icon>
                </div>
                <div class="ql">
                    <text style="margin-left:-420px" >群聊</text>
                </div>
            </div>
        </div>
        <scroller class="chat-news">
            <div class="chat-news-list" @click="friendDeatil(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text>熊大</text>
                </div>
            </div>
            <div class="chat-news-list" @click="friendDeatil(event)">
                <div class="img">
                    <image style="width:140px;height:140px;border-radius:100px;border-width: 2px;border-color:black;margin-left:10px;margin-top: 10px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
                </div>
                <div class="new_text">
                    <text>熊san</text>
                </div>
            </div>
        </scroller>
        <div class="active" v-if="show">
            <div class="demo-title" if="shown">
                <text class="title" style="color: white"  @click="extendqun(event)">创建群</text>
            </div>
            <div class="demo-title" if="shown">
                <text class="title" style="color: white" @click="addqun(event)">加入群</text>
            </div>
            <div class="demo-title" if="shown" @click=" addfriend(event)">
                <text class="title" style="color: white">添加好友</text>
            </div>
        </div>
        <div class="alret-model" v-if="appeaer">
            <text class="alret-text" style="text-align: center">创建群</text>
            <text class="alret-text-x">
                <text>请输入群名：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t">
                <!--<text style="margin-left: -80px;color: green">确定</text>-->
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked="wxcButtonClicked"></wxc-button>
            </text>
        </div>
        <div class="alret-model" v-if="qunId">
            <text class="alret-text" style="text-align: center">加入群</text>
            <text class="alret-text-x">
                <text>请输入群ID：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t">
                <!--<text style="margin-left: -80px;color: green">确定</text>-->
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked="concel(event)"></wxc-button>
            </text>
        </div>
        <div class="alret-model" v-if="friendId">
            <text class="alret-text" style="text-align: center">添加好友</text>
            <text class="alret-text-x">
                <text>请输入好友ID：</text>
                <input style="border-color:rgb(255, 80, 0);border-width:2px;
                border-radius: 5px;
                width:400px;height:60px" type="text" />
            </text>
            <text class="alret-text-t">
                <wxc-button class="btn" text="确定"
                            type="normal"
                            @wxcButtonClicked=""></wxc-button>
                <wxc-button class="btn" text="取消"
                            type="red"
                            @wxcButtonClicked="concel(event)"></wxc-button>
            </text>
        </div>
    </div>
</template>

<script>
    import { WxcIcon } from 'weex-ui'
    import { WxcMinibar } from 'weex-ui';
    import { WxcButton } from 'weex-ui'
    const modal = weex.requireModule('modal');
    var navigator = weex.requireModule('navigator');
    export default {
        components: { WxcMinibar,WxcIcon,WxcButton,},
        data:()=> ({
            show: false,
            isFalse: false,
            overlayCanClose: true,
            hasAnimation: true,
            appeaer:false,
            qunId:false,
            friendId:false
        }),
        methods: {
            minibarLeftButtonClick () {
            },
            minibarRightButtonClick () {
                modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
            },
            qqq(){
                var bundleUrl = this.$getConfig().bundleUrl;
                bundleUrl = new String(bundleUrl);
                var nativeBase;
                var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

                var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
                if (isAndroidAssets) {
                    nativeBase = 'file://assets/dist/';
                }
                else if (isiOSAssets) {
                    nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
                }
                else {
                    var host = 'localhost:8081';
                    var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
                    if (matches && matches.length >= 2) {
                        host = matches[1];
                    }
                    nativeBase = 'http://' + host + '/dist/';
                }
                this.baseURL = nativeBase;
            },
            tongzhi(event) {
                this.qqq();
                navigator.push({
                    url: this.baseURL+'friendtongzhi.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            qunliao(event) {
                this.qqq();
                navigator.push({
                    url: this.baseURL+'qunChat.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            friendDeatil(event) {
                this.qqq();
                navigator.push({
                    url: this.baseURL+'friendDeatil.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            toggle2() {
                this.show = !this.show;
            },
            wxcButtonClicked (e) {
                this.appeaer=!this.appeaer;
            },
            extendqun(event){
                this.show=false;
                this.appeaer=true;
            },
            addqun(event){
                this.show=false;
                this.qunId=true;
            },
            addfriend(event){
                this.show=false;
                this.friendId=true;
            },
            concel(event){
                this.appeaer=false;
                this.qunId=false;
                this.friendId=false;
            }
        }
    };
</script>

<style scoped>
   .tongzhi{
       width: 750px;
       height: 100px;
       justify-content: center;
       align-items:left;
       display: flex;

   }
    .tongzhi_img{
        width: 100px;
        height: 100px;
        justify-content: center;
        align-items:center;
        display: flex;
        border-color: #bbff1e;
        border-width: 1px;
        margin-left: 10px;
    }
    .ql{
        width: 650px;
        height: 100px;
        justify-content: center;
        align-items:center;
        display: flex;
        margin-top:-100px;
        margin-left: 110px;
        position: relative;
        border-width:1px;
        border-color:black;
    }
    .chat-news{
        width:750px;
        min-height:1000px;
    }
    .chat-news-list{
        width:750px;
        min-height:160px;
        border-width: 1px;
        border-color:black;
    }
    .img{
        width: 160px;
        height: 160px;
    }
    .new_text{
        width:570px;
        height: 160px;
        margin-top: -160px;
        margin-left: 180px;
        justify-content:center;
        align-items:left;
        display: flex;
    }
    .active{
        width: 300px;
        height: 303px;
        position:absolute;
        top:90px;
        z-index: 999;
        left:448px;
        color:white !important;
    }
    .demo-title{
        width:300px;
        height: 100px;
        border-color: #fafafa;
        border-width: 2px;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        flex-direction:row;
        justify-content:center;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        align-items: center;
        border-bottom-width:0px;
        color:white !important;
        background-color: rgba(28, 29, 13, 0.85);
    }
   .active{
       width: 300px;
       height: 303px;
       position:absolute;
       top:90px;
       z-index: 999;
       left:448px;
       color:white !important;
   }
   .demo-title{
       width:300px;
       height: 100px;
       border-color: #fafafa;
       border-width: 2px;
       display: flex;
       display: -webkit-flex;
       flex-wrap: wrap;
       flex-direction:row;
       justify-content:center;
       font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
       align-items: center;
       border-bottom-width:0px;
       color:white !important;
       background-color: rgba(28, 29, 13, 0.85);
   }
   .alret-model{
       width:500px;
       height: 400px;
       border-color:rgb(255, 80, 0);
       border-width: 2px;
       position: absolute;
       top:250px;
       left:125px;
       display: -webkit-flex;
       display: flex;
       flex-direction: column;
       border-radius: 10px;
       z-index: 9999;
       background-color:#FFDEAF;
   }
   .alret-text{
       width: 450px;
       height:100px;
       left:25px;
       justify-content: center;
       align-items: center;
       display: flex;
       display: -webkit-flex;
   }
   .alret-text-x{
       width: 450px;
       height:110px;
       left:46px;
       justify-content:left;
       flex-direction: column;
       display: flex;
       display: -webkit-flex;
   }
   .alret-text-t{
       width: 450px;
       height:110px;
       left:25px;
       justify-content:center;
       display: flex;
       display: -webkit-flex;
       flex-direction: row;
       align-items: center;
       margin-top: 50px;
   }
   .btn{
       width: 200px;
       height: 100px;
       border-radius: 10px;
       margin-left: 20px;
   }
</style>